<template>
  <view class="empty-pallet-container">
    <!-- <uni-nav-bar title="空托处理" left-icon="back" @clickLeft="goBack" :border="false"></uni-nav-bar> -->

    <view class="form-section">
      <view class="form-item">
        <text class="label">地码:</text>
        <input
          v-model="formData.locationCode"
          class="input"
          type="text"
          placeholder="请输入地码"
        />
      </view>
	  <view class="form-item">
	    <text class="label">器具型号:</text>
	    <input
	      v-model="formData.modelAppliance"
	      class="input"
	      type="text"
	      placeholder="请输入器具型号"
	    />
	  </view>
	  
	  <view class="button-row">
        <button @click="EmptyContainersGoods" class="btn btn-primary" :disabled="loadingOne">
          <text v-if="loadingOne" class="cuIcon-loading2 iconfont-spin"></text>
          {{ loadingOne ? '提交中...' : '空箱要货' }}
        </button>
        <button @click="EmptyStorage" class="btn btn-primary" :disabled="loadingTwo">
          <text v-if="loadingTwo" class="cuIcon-loading2 iconfont-spin"></text>
          {{ loadingTwo ? '提交中...' : '入库' }}
        </button>
      </view>
      <view class="button-row">
        <button @click="ReturnWarehouse" class="btn btn-primary" :disabled="loadingThre">
          <text v-if="loadingThre" class="cuIcon-loading2 iconfont-spin"></text>
          {{ loadingThre ? '提交中...' : '回库' }}
        </button>
        <button @click="fillUpTheBack" class="btn btn-primary" :disabled="loadingFour">
          <text v-if="loadingFour" class="cuIcon-loading2 iconfont-spin"></text>
          {{ loadingFour ? '提交中...' : '回托补满' }}
        </button>
      </view>
      <view class="button-row">
        <button @click="OutboundReplenishment" class="btn btn-primary" :disabled="loadingFive">
          <text v-if="loadingFive" class="cuIcon-loading2 iconfont-spin"></text>
          {{ loadingFive ? '提交中...' : '出库补托' }}
        </button>
        <button @click="handleCallEmptyPallet" class="btn btn-primary" :disabled="loadingSix">
          <text v-if="loadingSix" class="cuIcon-loading2 iconfont-spin"></text>
          {{ loadingSix ? '提交中...' : '空箱回托' }}
        </button>
      </view>

    </view>
	
	

<!--    <view class="button-section">
      <button class="btn btn-primary" @click="handleOccupyEmptyPallet">空箱要货</button>
      <button class="btn btn-danger" @click="handleCallEmptyPallet">入库</button>
    </view>
	<view class="button-section">
	  <button class="btn btn-primary" @click="handleOccupyEmptyPallet">回库</button>
	  <button class="btn btn-danger" @click="handleCallEmptyPallet">回托补满</button>
	</view>
	<view class="button-section">
	  <button class="btn btn-primary" @click="handleOccupyEmptyPallet">出库补托</button>
	  <button class="btn btn-danger" @click="handleCallEmptyPallet">空箱回托</button>
	</view> -->
	
	

  </view>
</template>

<script>
import {emptyGoods,Storage,ReturnStorage,fillBack,Outbound,CallEmpty} from '@/api/system/emptyPallet';


var main, receiver, filter; // 扫码相关变量
export default {
  data() {
    return {
	   formData: {
		   modelAppliance: '',
		   locationCode: ''
		   },
      loadingOne: false,
      loadingTwo: false,
      loadingThre: false,
      loadingFour: false,
      loadingFive: false,
      loadingSix: false,
    };
  },

  onLoad() {
    this.initScan();
  },

  onShow() {
    this.startScan();
  },

  onHide() {
    this.stopScan();
  },

  onUnload() {
    this.stopScan();
  },
  methods: {



    initScan() {
      let _this = this;
      /* #ifdef APP-PLUS */
      main = plus.android.runtimeMainActivity();
      var IntentFilter = plus.android.importClass('android.content.IntentFilter');
      filter = new IntentFilter();
      filter.addAction("com.service.scanner.data")
      receiver = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {
        onReceive: function (context, intent) {
          plus.android.importClass(intent);
          let code = intent.getStringExtra("ScanCode");
          console.log(code)
          _this.handleScanResult(code);
        }
      });
      /* #endif */
    },

    handleScanResult(code) {
      // 判断扫码内容类型
      if (code.startsWith('L')) {
        // 库位格式
        if (!this.formData.locationCode) {
          this.formData.locationCode = code.substring(1);
        } else if (!this.formData.modelAppliance) {
          this.formData.modelAppliance = code.substring(1);
        }
      }
    },

    startScan() {
      /* #ifdef APP-PLUS */
      main.registerReceiver(receiver, filter);
      /* #endif */
    },

    stopScan() {
      /* #ifdef APP-PLUS */
      main.unregisterReceiver(receiver);
      /* #endif */
    },

	  
	  handleReset() {
	    this.formData = {
	      modelAppliance: '',
	      locationCode: ''
	    };
	  },
    goBack() {
      uni.navigateBack(); // 返回上一页
    },

    EmptyContainersGoods() {
		console.log('空箱要货:', this.formData);
      if (!this.formData.locationCode) {
        this.$modal.msgError('请输入地码');
        return;
      }
      if (!this.formData.modelAppliance) {
        this.$modal.msgError('请输入器具型号');
        return;
      }
      this.loadingOne = true;
      emptyGoods(this.formData)
          .then(res=>{
            if (res.code === 200) {
              this.loadingOne=false;
                  this.$modal.msgSuccess('空箱要货成功');
              this.handleReset();
            } else {
              this.$modal.msgError(res.msg || '空箱要货失败');
            }
      }).catch(error =>{
        console.error('操作失败:', error);
        this.$modal.msgError('操作失败，请稍后重试');
      }).finally(() => {
        this.loadingOne = false;
      })
    },

    EmptyStorage() {
      console.log('入库:', this.formData);
      if (!this.formData.locationCode) {
        this.$modal.msgError('请输入地码');
        return;
      }
      if (!this.formData.modelAppliance) {
        this.$modal.msgError('请输入器具型号');
        return;
      }
      this.loadingTwo = true;

      Storage(this.formData)
          .then(res=>{
            if (res.code === 200) {
              this.loadingTwo=false;
                  this.$modal.msgSuccess('入库成功');
              this.handleReset();
            } else {
              this.$modal.msgError(res.msg || '入库失败');
            }
          }).catch(error =>{
        console.error('操作失败:', error);
        this.$modal.msgError('操作失败，请稍后重试');
      }).finally(() => {
        this.loadingTwo = false;
      })
    },

    ReturnWarehouse() {
      console.log('回库:', this.formData);
      if (!this.formData.locationCode) {
        this.$modal.msgError('请输入地码');
        return;
      }
      if (!this.formData.modelAppliance) {
        this.$modal.msgError('请输入器具型号');
        return;
      }
      this.loadingThre = true;
      ReturnStorage(this.formData)
          .then(res=>{
            if (res.code === 200) {
              this.loadingThre=false;
                  this.$modal.msgSuccess('回库成功');
              this.handleReset();
            } else {
              this.$modal.msgError(res.msg || '回库失败');
            }
          }).catch(error =>{
        console.error('操作失败:', error);
        this.$modal.msgError('操作失败，请稍后重试');
      }).finally(() => {
        this.loadingThre = false;
      })
    },
    fillUpTheBack() {
      console.log('回库:', this.formData);
      if (!this.formData.locationCode) {
        this.$modal.msgError('请输入地码');
        return;
      }
      if (!this.formData.modelAppliance) {
        this.$modal.msgError('请输入器具型号');
        return;
      }
      this.loadingFour = true;
      fillBack(this.formData)
          .then(res=>{
            if (res.code === 200) {
              this.loadingFour=false;
                  this.$modal.msgSuccess('回库成功');
              this.handleReset();
            } else {
              this.$modal.msgError(res.msg || '回库失败');
            }
          }).catch(error =>{
        console.error('操作失败:', error);
        this.$modal.msgError('操作失败，请稍后重试');
      }).finally(() => {
        this.loadingFour = false;
      })
    },
    OutboundReplenishment() {
      console.log('出库补托:', this.formData);
      if (!this.formData.locationCode) {
        this.$modal.msgError('请输入地码');
        return;
      }
      if (!this.formData.modelAppliance) {
        this.$modal.msgError('请输入器具型号');
        return;
      }
      this.loadingFive = true;
      Outbound(this.formData)
          .then(res=>{
            if (res.code === 200) {
              this.loadingFive=false,
                  this.$modal.msgSuccess('出库补托成功');
              this.handleReset();
            } else {
              this.$modal.msgError(res.msg || '出库补托失败');
            }
          }).catch(error =>{
        console.error('操作失败:', error);
        this.$modal.msgError('操作失败，请稍后重试');
      }).finally(() => {
        this.loadingFive = false;
      })
    },

    handleCallEmptyPallet() {
      console.log('出库补托:', this.formData);
      if (!this.formData.locationCode) {
        this.$modal.msgError('请输入地码');
        return;
      }
      if (!this.formData.modelAppliance) {
        this.$modal.msgError('请输入器具型号');
        return;
      }
      this.loadingSix = true;
      CallEmpty(this.formData)
          .then(res=>{
            if (res.code === 200) {
              this.loadingSix=false,
                  this.$modal.msgSuccess('出库补托成功');
              this.handleReset();
            } else {
              this.$modal.msgError(res.msg || '出库补托失败');
            }
          }).catch(error =>{
        console.error('操作失败:', error);
        this.$modal.msgError('操作失败，请稍后重试');
      }).finally(() => {
        this.loadingSix = false;
      })
    },




  },
};
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uni-scss/variables.scss';

.empty-pallet-container {
  padding: 16px;
}

.form-section {
  margin-bottom: 20px;
  background-color: $uni-white; // 使用 uni-scss 变量
  border-radius: 8px;
  padding: 16px;

  .form-item {
    margin-bottom: 16px; // 调整间距

    .label {
      display: block; // 标签独占一行
      font-size: 14px;
      color: $uni-main-color; // 使用 uni-scss 变量
      margin-bottom: 8px; // 调整标签与输入框间距
      font-weight: 500; // 加粗
    }

    .input {
      width: 100%; // 输入框宽度100%
      height: 40px; // 调整高度
      background-color: $uni-bg-color; // 使用 uni-scss 变量
      border-radius: 4px;
      padding: 0 12px; // 调整内边距
      font-size: 14px;
      color: $uni-main-color; // 使用 uni-scss 变量
      border: none; // 移除边框
    }
  }
}

.button-row {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;

  .btn {
    width: 48%;
  }
}

.inventory-counting-container {
  padding: 16px;
  // 其他样式
}

.task-section,
.scanning-section,
.difference-section,
.submit-section {
  margin-bottom: 20px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  // 其他样式
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  display: block;
}

.form-item {
  margin-bottom: 12px;

  .label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
  }

  .input {
    width: 100%;
    height: 36px;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
  }
}

.btn-primary {
  background-color: #4A90E2;
  color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-radius: 4px;
  text-align: center;
  margin-top: 12px;
}

.scan-result {
  margin-bottom: 12px;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;

  .iconfont-spin {
    margin-left: 8px;
  }
}

.scanned-items-list {
  margin-top: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;

  .item-header, .scanned-item {
    display: flex;
    padding: 8px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
    text-align: center;
    align-items: center; // 垂直居中

    .item-code { width: 25%; }
    .item-info { width: 30%; }
    .item-stock { width: 15%; }
    .item-stock.difference { color: #ff4d4f; font-weight: bold;}
    .item-stock.difference.is-different { color: #ff4d4f; font-weight: bold;} // 明确差异颜色

    .input-counted {
      width: 100%; // 让输入框填充父容器
      height: 24px; // 调整输入框高度
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0 4px;
      font-size: 12px;
      text-align: center;
    }
  }

  .item-header {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
  }

  .scanned-item {
    background-color: #fff;
    &:last-child {
      border-bottom: none;
    }
  }

   .empty-state {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: #999;
    background-color: #fff;
  }
}

.iconfont-spin {
  display: inline-block;
  animation: loading-rotate 2s linear infinite;
}

@keyframes loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


</style>